import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction
} from '@/store/input/actionCreators' // 引入定义的 action

class todlList extends Component {
  render() {
    const { inputValue, changeInputValue, handleClick, list, handleDelete } = this.props
    return (
      <div>
        <div>
          <input value={inputValue} onChange={changeInputValue} />
          <button onClick={handleClick}>提交</button>
        </div>
        <ul>
          {list.map((item, index) => {
            return (
              <li
                onClick={() => {
                  handleDelete(index)
                }}
                key={index}
              >
                {item}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
const mapStateToProps = (state) => ({
  // 将 Redux store 的状态映射为组件的 props
  inputValue: state.input.inputValue,
  list: state.input.list
})

const mapDispatchToProps = (dispatch) => {
  // 将触发 action 的函数映射为组件的 props
  return {
    changeInputValue(e) {
      const action = getInputChangeAction(e.target.value)
      dispatch(action)
    },
    handleClick() {
      const action = getAddItemAction()
      dispatch(action)
    },
    handleDelete(index) {
      const action = getDeleteItemAction(index)
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(todlList)
